<!-- 编辑具体地理位置 -->
<template>
  <div class="container">
    <LocationName/>
    <button @click="showMapModal" class="edit-location-btn">
      <img src="@/assets/PmvXARAE3r.png" alt="编辑地理位置" class = "map_imgs">
      <span>编辑地理位置</span>
    </button>

    <!-- 地图模态框部分 -->
    <div v-if="showMapModal" class="modal" @click.self="closeMapModal">
      <div class="modal-content map-modal">
        <span class="close" @click="closeMapModal">&times;</span>
        <h2>地图编辑器</h2>
        <!-- 地图编辑器内容 -->
        <!-- 这里可以放置一个地图组件，让用户可以拖动标记或者输入坐标来编辑地理位置信息 -->
        <div>
          <div ref="mapContainer" style="width: 100%; height: 400px;"></div>
          <button @click="getPosition">获取位置信息</button>
          <p>经度：{{ longitude }}</p>
          <p>纬度：{{ latitude }}</p>
        </div>
      </div>
    </div>
    <timeselector/>
    <seePicture/>
  </div>
  
</template>

<script>

import LocationName from './locationName.vue';
import seePicture from './seePicture.vue';
import timeselector from './timeselector.vue';

export default {
  components:{
    LocationName,
    timeselector,
    seePicture,
  },
  data() {
    return {
      showMapModal: false,
      map: null,
      longitude: null,
      latitude: null,
    };
  },
  methods: {
    showMapModal() {
      this.showMapModal = true;
    },
    closeMapModal() {
      this.showMapModal = false;
    },

    created() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化地图
      this.map = new AMap.Map(this.$refs.mapContainer, {
        zoom: 13,
      });

      // 监听地图点击事件
      this.map.on('click', (event) => {
        const { lng, lat } = event.lnglat;
        this.longitude = lng;
        this.latitude = lat;
      });
    },
    getPosition() {
      // 你可以在这里获取用户当前位置，然后在地图上显示标记
      // 这里仅用于示例
      alert(`经度：${this.longitude}, 纬度：${this.latitude}`);
    },
  },

  },
};
</script>
 
  
<style scoped>  
.select-project {  
  padding: 20px;  
  border-radius: 10px;  
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  
  background-color: #f9f9f9;  
  color: #333;  
  font-family: 'Arial', sans-serif;  
}  
  
.select-project h2 {  
  text-align: center;  
  margin-bottom: 20px;  
  color: #4CAF50; /* 使用绿色表示标题 */  
}  
  
.project-item {  
  padding: 10px;  
  margin-bottom: 10px;  
  background-color: #fff;  
  border-radius: 5px;  
  box-shadow: 0 1px 3px rgba(64, 219, 121, 0.1);  
  transition: background-color 0.3s ease; /* 添加点击时的背景色渐变效果 */  
  cursor: pointer;  
}  
  
.project-item:hover {  
  background-color: #f0f0f0; /* 鼠标悬停时改变背景色 */  
}  
  
.selected-project-text {  
  font-weight: bold;  
  margin-top: 20px;  
  text-align: center;  
}  
  
/* 如果你想要一个高亮显示已选择项目的样式，可以添加以下样式 */  
.project-item.selected {  
  background-color: #6bd83d; /* 使用与标题相同的绿色 */  
  color: #fff; /* 文本颜色变为白色 */  
}  
  
/* 你可以在Vue组件的methods中添加一个逻辑来动态地添加或移除'selected'类 */

  
.modal.show {  
  opacity: 1; /* 显示模态框 */  
  visibility: visible;  
}  

.map_imgs{
  width: 30px;
  height: 30px;
}
</style>

